<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :model="form" :label-width="100" inline>
          <FormItem label="选择时间">
            <DatePicker @on-change="times" type="daterange" :start-date="new Date()" placement="bottom-end"
                        placeholder="请选择一个时间范围" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem label="轮播图状态">
            <Select v-model="form.state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="0">已启用</Option>
              <Option value="1">已禁用</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="search()">搜索</Button>
          </FormItem>

          <FormItem>
            <Button type="success" @click="add()">新增</Button>
          </FormItem>
        </Form>
      </Col>
      <Col :span="24">
        <div class="table-container">
          <Table border :max-height="800" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据">
          </Table>
        </div>
        <div class="page-container" v-if="total > 10">
          <Page :total="total" @on-change="pageChange"></Page>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowAdd" title="新增轮播图" footer-hide>
      <div class="center">
        <Upload :action="uploadPath" :format="['jpg','png']" :show-upload-list="false" :on-success="successHandler">
          <Button icon="ios-cloud-upload-outline">导入数据</Button>
        </Upload>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "adver",
  data() {
    return {
      form: {
        id: '',
        state: '',
        startTime: '',
        endTime: '',
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      isShowAdd: false,
      uploadPath: "http://" + location.hostname + ":8110/uploadAd?type=ad",
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    times(val) {
      this.form.startTime = val[0] ? val[0] + " 00:00:00" : ""
      this.form.endTime = val[1] ? val[1] + " 23:59:59" : ""
    },
    getCols() {
      let that = this;
      return [
        {title: '轮播图编号', key: 'slideId', tooltip: true, align: 'center', width: 150},
        {title: '轮播图地址', key: 'slideName', tooltip: true, align: 'center'},
        {
          title: '轮播图预览', key: 'slideName', tooltip: true, align: 'center', width: 200, render(h, obj) {
            return h(('img'), {attrs: {src: obj.row.slideName, style: 'max-width:100%;max-height:100%;'}})
          }
        },
        {title: '新增时间', key: 'slideCreatime', tooltip: true, align: 'center'},
        {
          title: '订单状态', key: 'slideStatus', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.slideStatus === "0" ? 'success' : 'error'},
              on: {
                click: () => {
                  that.changeEnableState(obj.row)
                }
              }
            }, obj.row.slideStatus === "0" ? '已启用' : '已禁用')
          }
        }
      ]
    },
    search() {
      this.loadData()
    },
    pageChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    loadData() {
      let that = this;
      let params = {}
      params.id = this.form.id
      params.state = this.form.state
      params.startTime = this.form.startTime
      params.endTime = this.form.endTime
      params.pageNum = this.pageNum
      params.pageSize = this.pageSize
      this.$http.postJson('/ad/loadAd', params).then(res => {
        that.total = res.total
        that.tableData = res.data
        that.pageNum = res.pageNum
        that.pageSize = res.pageSize
      })
    },
    changeEnableState(val) {
      if (val.slideStatus === "0") {
        val.slideStatus = "1";
      } else {
        val.slideStatus = "0";
      }
      let that = this;
      this.$http.postJson('/ad/updateState', val).then(res => {
        that.$Message.success('更新成功');
        that.loadData()
      }).catch(() => {
        that.$Message.success('更新失败');
        that.loadData()
      })
    },
    add() {
      this.isShowAdd = true
    },
    successHandler(response, file, fileList) {
      if (response.code === 200) {
        this.$Message.success("新增广告轮播图成功")
      } else {
        this.$Message.success("新增广告轮播图失败")
      }
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}

.center {
  display: flex;
  justify-content: center;
}
</style>
